<!-- 选择新增的流程 -->
<template>
	<div class="btn">
		<el-button
			@click="toPath('', '创建')"
			round
			class="button_funtion"
			>创建台账</el-button
		>
	</div>
	<public-table
		class="m-t20"
		:index="true"
		:page="state.page"
		border
		:tableData="state.tableData"
		:isPaging="false"
		:tableOption.sync="state.tableOption"
	>
		<template #operation="scope">
			<!-- <span
              style="cursor: pointer;color: #fc7037"
              @click="toPath(scope.row)"
          >{{scope.row.operation}}</span> -->
			<el-button
				@click="toPath(scope.row, '配置')"
				class="button_cancel"
				type="info"
				size="small"
				>配置</el-button
			>
			<el-button
				@click="toPath(scope.row, '项目查看')"
        class="button_view"
				type="primary"
				size="small"
				>查看</el-button
			>
			<!-- <el-button
				color="#FF7B50"
				@click="toPath(scope.row, '合同查看')"
				style="color: #fff"
				type="primary"
				size="small"
				>查看</el-button
			>
			<el-button
				color="#FF7B50"
				@click="toPath(scope.row, '自定义查看')"
				style="color: #fff"
				type="primary"
				size="small"
				>查看</el-button
			> -->
			<el-button
				@click="toPath(scope.row, '移出')"
				color="#f01f2e"
				size="small"
				v-if="scope.row.canDel == 1"
				style="color: #fff"
				>移出</el-button
			>
		</template>
	</public-table>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import PublicTable from "@/components/PublicTable";
import { useRouter } from "vue-router";
import { ledgerApi } from "@/api/biddingProject";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();

const state = reactive({
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	tableOption: [
		{ label: "招标项目台账 ", prop: "ledgerName", width: 800 },
		{ label: "操作", prop: "operation", slot: true, width: 400 },
	],
	dialogVisible: false,
	tableData: [],
});

const toPath = (row, key) => {
	switch (key) {
		case "配置":
			router.push({
				path: `/tender/ledger/ledgerConfiguration/ledgerId=${
					row.ledgerId
				}&ledgerName=${encodeURIComponent(row.ledgerName)}`,
			});
			break;
		// case "合同查看":
		// 	router.push("/tender/ledger/ledgerContractView");
		// 	break;
		case "项目查看":
			router.push({
				path: `/tender/ledger/ledgerProjectView/ledgerId=` + row.ledgerId,
			});
			break;
		// case "自定义查看":
		// 	router.push("/tender/ledger/ledgerDIYView");
		// 	break;
		case "移出":
			ElMessageBox.confirm("是否确认移出?", "提示", {
				confirmButtonText: "移出",
				cancelButtonText: "取消",
				type: "warning",
				confirmButtonClass: "ExitConfirmButton",
				cancelButtonClass: "ExitCancelButton",
				center: true,
			}).then(() => {
				handleRemove(row);
			});

			// handleRemove(row);

			break;
		case "创建":
			router.push({
				path: `/tender/ledger/ledgerConfiguration/ledgerName=${""}`,
			});
			break;

		default:
			break;
	}
};

const handleRemove = (row) => {
	ledgerApi.removeProjectLedger(row.ledgerId).then((res) => {
		if (res.code == 200) {
			ElMessage.success("移出成功!");
			getLists();
		}
	});
};

const getLists = () => {
	ledgerApi.getList().then((res) => {
		if (res.code == 200) {
			state.tableData = res.data;
		}
	});
};

onMounted(() => {
	getLists();
});
</script>

<style lang="scss" scoped>
.btn {
	text-align: right;
	.el-button {
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
	}
}
</style>
<style>
.ExitConfirmButton {
	background: #f21434 !important;
	color: #fff !important;
	border: 0;
}
.ExitCancelButton {
	background-color: #fff !important;
}
</style>
